<template>
	<div class="page-box">
	   <div class="course-header">
		   <div class="course-header-content">
			   <div class="course-header-img">
				   <img src="../../assets/111..png" alt=""/>
			   </div>
			   <div class="course-header-title">
			   		<h3>React零基础入门到实战，完成企业级项目</h3>	
						   <el-tag>必修课</el-tag>
			   </div>
			   <div class="course-header-pd">
			   		<el-progress type="circle" :percentage="25"></el-progress>		   
			   </div>
		   </div>
		   <p class="course-header-info">
			   本课程通过实战开发，从基础原理逐步深入讲解React中的主流技术以及实战中的应用。课程讲解全部使用React18最新语法，让同学们全方位理解应用React构建
			   项目，直接上手中级以上难度React项目开发。
		   </p>
	   </div>
	</div>
</template>

<script>
	
</script>

<style>
	.page-box {
		width: 1200px;
		min-height: 600px;
		margin: 50px auto;
		background-color: #eeeeee;
	}
	.course-header {
		width: 1200px;
		min-height: 200px;
		border-radius: 15px;
		opacity: 1;
		
		background: #FFFFFF;
		
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3)
	}
	.course-header-content{
		
		padding: 20px;
		display: flex;
	}
	.course-header-img{
		width: 150px;
	}
	.course-header-title {
		flex: 1;
	}
	.course-header-pd{
		width: 150px;
	}
	.course-header-info{
		padding: 20px;
		line-height: 30px;
		
	}
</style>